<template>
    <div class="dashboard-container">
      <!-- 顶部信息卡片区域 -->
      <div class="top-cards-container">
        <div class="top-row">
          <div class="info-card">
            <!-- 左上角第一个卡片 -->
          </div>
          <div class="info-card">
            <!-- 左上角第二个卡片 -->
          </div>
          <div class="info-card">
            <!-- 左上角第三个卡片 -->
          </div>
        </div>
        <div class="bottom-row">
          <div class="info-card">
            <!-- 左下角第一个卡片 -->
          </div>
          <div class="info-card">
            <!-- 左下角第二个卡片 -->
          </div>
          <div class="info-card">
            <!-- 左下角第三个卡片 -->
          </div>
        </div>
      </div>
  
      <!-- 中间区域 -->
      <div class="middle-container">
        <!-- 左侧图表区域 -->
        <div class="left-charts">
          <div class="chart-container">
            <!-- 日流程集束成功率图表 -->
            <div class="chart-title">日流程集束成功率</div>
            <div class="chart-content"></div>
          </div>
          <div class="chart-container">
            <!-- 分钟级数据图表 -->
            <div class="chart-title">分钟级数据集束成功率</div>
            <div class="chart-content"></div>
          </div>
        </div>
  
        <!-- 中间地图区域 -->
        <div class="map-container">
          <div class="map-header">
            <div class="map-title">单位选择：广西</div>
            <div class="map-tabs">
              <div class="tab">智能终端</div>
              <div class="tab">智能电表</div>
            </div>
          </div>
          <div class="map-content">
            <!-- 地图内容 -->
          </div>
        </div>
  
        <!-- 右侧排行榜区域 -->
        <div class="right-rankings">
          <div class="ranking-container">
            <!-- 第一个排行榜 -->
            <div class="ranking-title">台区线损排行榜</div>
            <div class="ranking-content"></div>
          </div>
          <div class="ranking-container">
            <!-- 第二个排行榜 -->
            <div class="ranking-title">台区分支线损排行榜</div>
            <div class="ranking-content"></div>
          </div>
        </div>
      </div>
  
      <!-- 底部区域 -->
      <div class="bottom-container">
        <div class="bottom-chart">
          <!-- 停电统计 -->
          <div class="chart-title">停电统计</div>
          <div class="chart-content"></div>
        </div>
        <div class="bottom-chart">
          <!-- 电能质量监测 -->
          <div class="chart-title">电能质量监测</div>
          <div class="chart-content"></div>
        </div>
        <div class="bottom-chart">
          <!-- 台区数据统计 -->
          <div class="chart-title">台区数据统计</div>
          <div class="chart-content"></div>
        </div>
        <div class="bottom-chart">
          <!-- 台区拓扑变更 -->
          <div class="chart-title">台区拓扑变更</div>
          <div class="chart-content"></div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  // 组件逻辑可以在这里添加
  </script>
  
  <style lang="scss" scoped>
  .dashboard-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    padding: 10px;
    background-color: #f5f7fa;
    gap: 10px;
  }
  
  // 顶部卡片区域样式
  .top-cards-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    
    .top-row, .bottom-row {
      display: flex;
      gap: 10px;
      
      .info-card {
        flex: 1;
        height: 80px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        padding: 15px;
      }
    }
  }
  
  // 中间区域样式
  .middle-container {
    display: flex;
    gap: 10px;
    height: 50vh;
    
    .left-charts {
      display: flex;
      flex-direction: column;
      width: 30%;
      gap: 10px;
      
      .chart-container {
        flex: 1;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        padding: 15px;
        display: flex;
        flex-direction: column;
        
        .chart-title {
          font-size: 14px;
          font-weight: bold;
          margin-bottom: 10px;
        }
        
        .chart-content {
          flex: 1;
        }
      }
    }
    
    .map-container {
      flex: 1;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      padding: 15px;
      display: flex;
      flex-direction: column;
      
      .map-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
        
        .map-title {
          font-size: 14px;
          font-weight: bold;
        }
        
        .map-tabs {
          display: flex;
          gap: 10px;
          
          .tab {
            padding: 5px 10px;
            border-radius: 4px;
            background-color: #f0f2f5;
            font-size: 12px;
            cursor: pointer;
            
            &.active {
              background-color: #1890ff;
              color: #fff;
            }
          }
        }
      }
      
      .map-content {
        flex: 1;
      }
    }
    
    .right-rankings {
      display: flex;
      flex-direction: column;
      width: 30%;
      gap: 10px;
      
      .ranking-container {
        flex: 1;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        padding: 15px;
        display: flex;
        flex-direction: column;
        
        .ranking-title {
          font-size: 14px;
          font-weight: bold;
          margin-bottom: 10px;
        }
        
        .ranking-content {
          flex: 1;
        }
      }
    }
  }
  
  // 底部区域样式
  .bottom-container {
    display: flex;
    gap: 10px;
    height: 30vh;
    
    .bottom-chart {
      flex: 1;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      padding: 15px;
      display: flex;
      flex-direction: column;
      
      .chart-title {
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 10px;
      }
      
      .chart-content {
        flex: 1;
      }
    }
  }
  
  // 响应式布局
  @media screen and (max-width: 1200px) {
    .middle-container {
      flex-direction: column;
      height: auto;
      
      .left-charts, .right-rankings {
        width: 100%;
      }
    }
    
    .bottom-container {
      flex-wrap: wrap;
      height: auto;
      
      .bottom-chart {
        min-width: calc(50% - 10px);
        height: 200px;
      }
    }
  }
  
  @media screen and (max-width: 768px) {
    .top-cards-container {
      .top-row, .bottom-row {
        flex-wrap: wrap;
        
        .info-card {
          min-width: calc(50% - 10px);
        }
      }
    }
    
    .bottom-container {
      .bottom-chart {
        min-width: 100%;
      }
    }
  }
  </style>